<template>
  <el-dialog class="dialogCard" :closeOnClickModal="false" :visible.sync="showCard">
    <div class="card" v-if="jobData">
      <div class="top">
        <div class="t">
          <label>{{jobData.companyName||jobData.user.company}}</label>
          <h1>{{jobData.title}}</h1>
          <span v-if="jobData.jobs&&jobData.jobs.length">
            {{jobData.jobs[0].job3?jobData.jobs[0].job3.name:(jobData.jobs[0].job1?jobData.jobs[0].job1.name:jobData.jobs[0].job2.name)}}
          </span>
        </div>
        <div class="b">
          <p>
            <span>{{jobData.created_at}} 작성({{jobData.updated_at}} 수정) </span>
            <b>{{jobData.source&&jobData.source!=0?jobData.source:'워크위즈'}}</b>에서 <b>{{curToThousands(jobData.readCount||0)}}</b> 번 조회
          </p>
          <!-- <template v-if="type!='userCenter'"> -->
              <el-popconfirm
                v-if="jobData.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect"
              >
                <a slot="reference" href="javascript:;" target="_self" class="btn collect">찜하기</a>
            </el-popconfirm>
            <a v-else href="javascript:;" target="_self" class="btn" @click="collect">찜하기</a>
          <!-- </template> -->
        </div>
      </div>
      <div style="margin-bottom: 10px;color: gray;">해당 채용공고와 상태가 다를 수 있습니다. 하단 자세히 보기를 통해 정확한 정보를 확인해 주세요.</div>
      <h2 class="tit">채용정보</h2>
      <div class="infos">
        <ul>
          <li class="bg">
            <label>채용직종</label>
            <span v-if="jobData.jobs&&jobData.jobs.length">
                {{jobData.jobs[0].job3?jobData.jobs[0].job3.name:(jobData.jobs[0].job1?jobData.jobs[0].job1.name:jobData.jobs[0].job2.name)}}
            </span>
          </li>
          <li class="bg">
            <label>근무지역</label>
            <span v-if="jobData.areas&&jobData.areas.length">
                {{jobData.areas[0].area1&&jobData.areas[0].area1.name}}
                <template v-if="jobData.areas[0].area2">
                  > {{jobData.areas[0].area2&&jobData.areas[0].area2.name}}
                </template>
                <template v-if="jobData.areas[0].area3">
                  > {{jobData.areas[0].area3&&jobData.areas[0].area3.name}}
                </template>
            </span>
          </li>
          <li>
            <label>경 력</label>
            <span>{{jobData.career&&jobData.career.value}} | {{jobData.careerMin}}-{{jobData.careerMax}}년</span>
          </li>
          <li>
            <label>급 여</label>
            <span>{{jobData.salary_fix&&jobData.salary_fix.value}} | {{jobData.salary_unit&&jobData.salary_unit.value}}
              <template v-if="jobData.salary_fix&&jobData.salary_fix.idx!=1">
                | {{jobData.salaryMin}}~{{jobData.salaryMax}}만원
              </template>
            </span>
          </li>
          <li>
            <label>학 력</label>
            <span>{{jobData.end_education&&jobData.end_education.value}}</span>
          </li>
          <li>
            <label>접수기간</label>
            <span>{{jobData.deadline}} 마감</span>
          </li>
          <li>
            <label>고용형태</label>
            <span>
              {{jobData.employee1&&jobData.employee1.value}}
              {{jobData.employee2&&jobData.employee2.value}}
              {{jobData.employee3&&jobData.employee3.value}}
            </span>
          </li>
          <li>
            <label>모집인원</label>
            <span>{{jobData.job_number}}명
              <template v-if="jobData.applyCount">
                (지원자 {{jobData.applyCount}}명)
              </template>
            </span>
          </li>
        </ul>
      </div>
      <h2 class="tit brm">상세요강</h2>
      <!-- <div class="con" v-html="getCon(jobData.crawlDetail)"></div> -->
      <div class="con richCon" v-html="jobData.iframe||'(상세요강이 없습니다)'"></div>
      <h2 class="tit pt">기업정보</h2>
      <div class="enInfo">
        <div class="logo">
          <template v-if="jobData.is_ours==1">
            <img v-if="jobData.crawlCompanyLogo" :src="jobData.crawlCompanyLogo" :onerror="errorThumb" />
            <img v-else src="@images/thumb2.png" alt="">
          </template>
          <template v-else>
            <img v-if="jobData.user&&jobData.user.uthumb" :src="jobData.user.uthumb" :onerror="errorThumb" />
            <img v-else src="@images/thumb2.png" alt="">
          </template>
        </div>
        <ul>
          <li class="bg">
            <label>기업이름</label>
            <span>{{jobData.companyName}}</span>
          </li>
          <li>
            <label>사업자등록번호</label>
            <span>{{jobData.companyBizNo}}</span>
          </li>
          <li>
            <label>산업(업종)</label>
            <span>
              {{jobData.user&&jobData.user.company_type&&jobData.user.company_type.name}}
            </span>
          </li>
          <li v-if="jobData.is_ours==1&&jobData.companyUrl">
            <label>기업정보</label>
            <a href="javascript:;" target="_self" @click="openPage(jobData.companyUrl)" class="btn">정보확인</a>
          </li>
        </ul>
      </div>
      <div class="btns">
        <template v-if="type=='userCenter'">
          <el-button type="primary" @click="editJob(jobData.id)">수정하기</el-button>
        </template>
        <template v-else>
          <el-button v-if="jobData.is_ours==1&&jobData.url" type="primary" @click="openMore(jobData.url)">자세히 보기</el-button>
        </template>
        <el-button class="esc" @click="close">닫기</el-button>
        <div style="margin-top: 40px;color: gray;">* 본 채용공고는 해당 채용서비스 업체에 정식으로 허가를 받아 수신된 정보입니다</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { toThousands } from '@/utils'
import { getJobDetail, myJobCollect } from "@/api";

export default {
  name: "resumeCard",
  components: {},
  props: ["cardParams", "type"],
  data() {
    return {
      jobData: null,
      showCard: false
    };
  },
  computed:{
    ...mapState(['errorThumb']),
  },
  created() {},
  mounted() {},
  methods: {
    async getInfo() {
      let _params={integrated_id: this.cardParams.id}
        !this.type&&(_params.is_show=1)
      let res = await getJobDetail(_params);
      if (res.code == 200) {
        this.showCard = true;
        this.jobData = res.data;
        this.$emit("changeLoad");
      }else{
        this.$emit("changeLoad");
      }
    },
    async collect(){
      let _status=1;
          this.jobData.collect&&(_status=0)
      let res = await myJobCollect({integrated_id:this.jobData.id,status:_status});
      try {
        if(res.code==200){
          this.jobData.collect=_status;
          this.$emit("changeCollect", _status);
        }
      } catch (error) {}
    },
    openMore(url){
      window.open(url, '_blank');
    },
    editJob(id) {
      this.$emit("editJob", id);
    },
    close() {
      this.showCard = false;
    },
    curToThousands(num){
      return toThousands(num)
    },
    openPage(url){
      window.open(url, '_blank');
    },
    getCon(data){
      if(!data||data&&data.indexOf('</iframe>')>-1){
        return '내용 없음'
      }else{
        return data;
      }
    }
  },
  watch: {
    cardParams(n, o) {
        this.getInfo();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/resume_card.scss";
</style>
